---
title: Fonts
---


::doc-component-demo
---
title: Customizing fonts
code: false
dark: false
---
In addition to the default `sans` and `mono` fonts, Tairo defines `heading` and `alt` fonts to allow you to create more unique designs. By default, we use predefined system fonts from Tailwind CSS but you can easily change them by editing the `tailwind.config.ts` file.

As an example, this demo uses a custom set of fonts:

```ts [demo/tailwind.config.ts]
import { withShurikenUI } from '@shuriken-ui/tailwind'

export default withShurikenUI({
  theme: {
    // Note that we do not use the `extend` key here
    fontFamily: {
      sans: ['Roboto Flex', 'sans-serif'],
      heading: ['Inter', 'sans-serif'],
      alt: ['Karla', 'sans-serif'],
      mono: ['Fira Code', 'mono'],
    },
  },
  content: [],
})
```

:doc-heading{label="Loading fonts"}

Defining a font in tailwind does not load the font for you. You need to load the font by yourself.
Tairo preinstalls [unplugin-fonts](https://github.com/cssninjaStudio/unplugin-fonts) module so you only have to configure it in your `nuxt.config.ts` file:

```ts [demo/nuxt.config.ts]
export default defineNuxtConfig({
  extends: [/* ... */],
  unfonts: {
    // This uses google fonts, but you can use 
    // any other provider supported by unplugin-fonts
    google: {
      families: ['Roboto Flex', 'Inter', 'Karla', 'Fira Code'],
    },
  },
})
```
::



::doc-nav
---
prev: /documentation/tailwindcss/colors
---
::